<template>
	<view class="page">
		<!-- home page -->
		<view class="header-box pad">
			<view class="fixed">
				<view class="header-title">
					<view class="icon-nav" @tap="goBack"></view>
					惠置换
				</view>
				<view class="search-box">
					<view class="goods-item">
						<picker class="goods-item" @change="typeBtn" range-key="name" :range="typeArr">
							{{type_label}} <text class="icon-tri"></text>
						</picker>
					</view>
					<view class="line"></view>
					<input type="text" value="" placeholder="请输入商品..." @click="onSearch()" readonly class="header-input" />
				</view>
				<view class="header-select-box">
					<v-tabs v-model="selectIndex" :lineScale=".8" :tabs="selectNav" color="#fff" paddingItem="0 30rpx 8rpx 0" :bold="true" fontSize="1.2em" lineRadius="0" size="32rpx" lineHeight="8rpx" lineColor="#fff" activeColor="#fff" @change="selectBtn"></v-tabs>
				</view>
			</view>
			
			<view class="banner-box">
				<swiper  :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/mallShop/banner1.png" class="banner-img" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/mallShop/banner1.png" class="banner-img" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="goods-box">
			<view class="goods-title">
				<view class="line"></view>
				{{ name }}商品
				<view class="line"></view>
			</view>
			
			<swiper class="swiper" :autoplay="false" :interval="200" :current="current" @change="onSwiper" :style="{height: height}">
				<swiper-item v-for="(item, index) of selectNav" :key="index">
					<uni-load-move status="loading" v-if="loading['list' + index]"></uni-load-move>
					<view class="goods-list pad" v-if="ruleForm['list' + index].length > 0">
						<block v-for="(a, i) in ruleForm['list' + index]" :key="i">
							<view class="goods-item">
								<navigator :url="'/mallShop/home/goodsDtl?id=' + a.goods_sku.goods_id" hover-class="none">
									<view class="goods-img-box">
										<easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="a.goods_image"></easy-loadimage>
									</view>
									<view class="goods-item-title">
										{{ a.goods_name }}
									</view>
								</navigator>
								<view class="goods-action-box">
									<view class="goods-price">
										CD ￥ <text class="int">{{ a.amount }}</text>.<text class="float">{{ a.zero }}</text>
									</view>
									<view class="goods-cart">
										<image src="/static/images/mallShop/add_cart.png" class="icon-cart" mode=""></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				
					<view class="empty" v-if="empty">
						<img src="../static/no-goods.png" alt="">
						暂无相关商品
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<MallFoot :on="0"></MallFoot>
	</view>
</template>

<script>
	import MallFoot from '@/components/mallFoot/mallFoot'
	import {tabs, shopList, isLogin} from '@/api/substitution.js'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	
	import uniLoadMove from '@/components/uni-load-more/uni-load-more.vue'
	
	export default {
		components:{
			MallFoot,
			vTabs,
			easyLoadimage,
			uniLoadMove
		},
		data() {
			return {
				typeArr:[{name:'商品'},{name:'商户'}],
				type_label:'商品',
				
				scrollTop: 0,
				
				current: 0,
				
				selectNav:[],
				selectIndex: 0,
				active: null,
				
				page: 1,
				
				list: [],
				name: '',
				
				is_load: true,  // true为第一页时，false为分页
				
				total: null,  // 总页数
				
				empty: false,
				
				height: null,
				
				ruleForm: {},
				
				loading: {},
			}
		},
		onLoad () {
			isLogin()
			
			uni.showLoading({
				mask: true
			})
			
			this.onTabs()
			
			this.onTableList()
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.is_load = true
			this.onTableList()
		},
		
		// 上拉加载
		onReachBottom() {
			if (this.page < this.total) {
				this.page += 1;
				this.is_load = false
				this.onTableList()
			}
		},
		
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		onPageScroll({scrollTop}) {
			this.scrollTop = scrollTop;
		},
		
		methods: {
			// 判断swiper高度
			swiperHeight (e) {
				if (e > 0) {
					this.height = Math.ceil(e / 2) * 495 + 'rpx'
				} else {
					this.height = '280px'
				}
			},
			
			// 返回
			goBack () {
				uni.navigateBack()
			},
			
			typeBtn(e){
				console.log(e)
				this.type_label = this.typeArr[e.detail.value].name
			},
			
			// 选项卡
			selectBtn(i){
				this.selectIndex = i;
			},
			
			// swiper滑动
			onSwiper(e) {
				this.selectIndex = e.detail.current
			},
			
			// 跳转搜索页
			onSearch () {
				uni.navigateTo({
					url: '/mallShop/home/search?url=1&type_label=' + this.type_label
				})
			},
			
			// 获取商品分类
			onTabs () {
				tabs('').then(res => {
					res.data.list.forEach((item,index) => {
						this.$set(this.ruleForm, 'list' + index, [])
						this.$set(this.loading, 'list' + index, false)
					})
					this.selectNav = res.data.list;
					this.active = res.data.list[0].category_id
					this.name = res.data.list[0].name
				})
			},
			
			// 获取商品列表
			onTableList() {
				shopList({
					sortType: 'all',
					page: this.page,
					sortPrice: 0,
					category_id: this.active,
					goods_type: 10,
					search: '',
				}).then(res => {
					this.total = res.data.list.last_page
					this.$set(this.loading, 'list' + this.current, false)
						
					// 判断第一页数据是否为空
					if (this.page === 1 && res.data.list.data.length === 0) {
						this.empty = true
						this.total = res.data.list.last_page
						this.ruleForm['list' + this.current] = [];
					} else {
						this.empty = false
						res.data.list.data.forEach(item => {
							item.amount = item.goods_sku.line_price.toString().split('.')[0];
							item.zero = item.goods_sku.line_price.toString().split('.')[1];
						})
						if (this.is_load) {
							this.$set(this.ruleForm, 'list' + this.current, res.data.list.data)
						} else {
							res.data.list.data.forEach(item => {
								this.ruleForm['list' + this.current].push(item)
							})
						}
						
						console.log(this.ruleForm['list' + this.current].length)
						this.swiperHeight(this.ruleForm['list' + this.current].length)
					}
					uni.stopPullDownRefresh()
				})
			}
		},
		watch: {
			selectIndex(a, b) {
				this.current = a;
				this.active = this.selectNav[a].category_id
				this.name = this.selectNav[a].name
				this.is_load = true
				this.empty = false
				this.page = 1;
				this.$set(this.loading, 'list' + this.current, true)
				this.onTableList();
				this.swiperHeight()
			}
		}
	}
</script>

<style lang="scss" scoped>
.pad{padding-left: 30rpx;padding-right: 30rpx;}
.page{background: #F5F5F5;}
.header-box{
	background: linear-gradient(180deg, #FE4A32, #FE7E48);
	height: 380rpx;
	color: #FFFFFF;
	.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 9;
		background: linear-gradient(-180deg, #FE4A32, #FE7E48);
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.header-title{
		height: 80rpx;
		position: relative;
		text-align: center;
		line-height: 80rpx;
		padding-top: 50rpx;
		.icon-nav{
			position: absolute;
			top:70%;
			left: 0;
			transform: translateY(-70%) rotate(-45deg);
			border-top:1px solid #FFF;
			border-left:1px solid #FFF;
			width: 20rpx;
			height: 20rpx;
		}
	}
	.search-box{
		display: flex;
		background: #FFFFFF;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		.line{
			width: 4rpx;
			height: 50rpx;
			background-color: #EFEFEF;
			position: relative;
			top:50%;
			transform: translateY(-50%);
			
		}
		.goods-item{
			padding: 0 17rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #888;
		}
		.header-input{
			flex:1;
			background: url('/static/images/mallShop/search.png') no-repeat 10px center;
			background-size:26rpx 26rpx;
			padding-left: 80rpx;
			height: 70rpx;
		}
	}
	.header-select-box{
		margin-top: 20rpx;
	}
	.select-box{
		display: flex;
		height: 80rpx;
		.select-item{
			margin-right: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height:60rpx;
			white-space: nowrap;
			&.on{
				font-size: 1.2em;
				position: relative;
				&::after{
					content: " ";
					display: block;
					background-color: #FFFFFF;
					width: 2em;
					height: 4px;
					left:0;
					bottom: -6rpx;
				}
			}
		}
	}
	.banner-box{
		position: relative;
		top: 300rpx;
		.banner-img{
			width: 690rpx;
			height: 280rpx;
			object-fit: cover;
		}
	}
}
// 精选商品
.goods-box{
	margin-top: 230rpx;
	padding-bottom: 120rpx;
	.goods-title{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
		.line{
			width: 30rpx;
			height: 4rpx;
			background: #666;
			&:first-child{
				margin-right: 10rpx;
			}
			&:last-child{
				margin-left: 10rpx;
			}
		}
	}
	.goods-list{
		margin-top: 30rpx;
		&::after{
			content: " ";
			display: block;
			clear: both;
		}
		.goods-item{
			width: calc(50% - 8rpx);
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding-bottom: 10rpx;
			margin-bottom:15rpx;
			&:nth-child(2n+1){
				float:left;
			}
			&:nth-child(2n){
				float:right;
			}
			.goods-img-box{
				width: 338rpx;
				height: 284rpx;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
				.goods-img{
					width: 338rpx;
					height: 284rpx;
				}
			}
			.goods-item-title{
				display: -webkit-box;
				-webkit-line-clamp:2;
				-webkit-box-orient:vertical;
				text-overflow: ellipsis;
				height: 3em;
				line-height: 1.4;
				overflow: hidden;
				font-size: 28rpx;
				color: #333333;
				margin-top: 40rpx;
				padding:0 20rpx;
			}
			.goods-action-box{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				padding:0 20rpx;
				.goods-price{
					color: #F13A1D;
					font-size: 26rpx;
					.int{
						font-size: 36rpx;
					}
				}
				.icon-cart{
					width: 44rpx;
					height: 44rpx;
				}
				
			}
			
		}
	}
	
	.empty {
		min-height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #333;
			
		img {
			width: 300rpx;
			margin-bottom: 30rpx;
		}
	}
}

.uni-load-more {
		/deep/ .uni-load-more__img {
			uni-image {
				height: 100% !important;
			}
		}
}
</style>
